<template>
	<Page title="出差地址管理" class="data-management-page">
		<template #body>
			<van-pull-refresh v-model="main.pullRefresh" @refresh="onRefresh">
				<van-collapse v-model="main.activeNames">
					<van-row>
						<van-col span="24" class="addNewRegionBtn">
							<van-button @click="openDialog(1)" type="primary" icon="add-o" size="small">
								新增出差区域
							</van-button>
						</van-col>
					</van-row>

					<template v-for="item in main.addressLibrary" :key="item.value">
						<van-swipe-cell>
							<van-collapse-item :title="item.text" :name="item.value">
								<template #value>
									<span class="regionCostStyle">¥ {{ item.cost }}</span>
								</template>
								<van-cell-group>
									<template v-for="it in item.children" :key="it.value">
										<van-swipe-cell stop-propagation>
											<van-cell center :title="it.text">
												<template #value>
													<span class="regionCostStyle">¥ {{ it.cost }}</span>
												</template>
											</van-cell>
											<template #right>
												<van-button square type="danger" text="删除" @click="removeByValue(it)" />
											</template>
										</van-swipe-cell>
									</template>
								</van-cell-group>
							</van-collapse-item>
							<template #right>
								<van-button square type="danger" text="删除" @click="removeByValue(item)" />
								<van-button square type="success" text="新增子项" @click="openDialog(2, item)" />
							</template>
						</van-swipe-cell>
					</template>
				</van-collapse>

				<van-dialog v-model:show="main.dialogInfo.isShow" :title="main.dialogInfo.title" show-cancel-button
					@confirm="onConfirmDialog(main.dialogInfo.flag)">
					<van-cell-group>
						<van-field v-model="main.dialogInfo.data.text" clearable label="名称"
							:placeholder="main.dialogInfo.title" />
						<van-field v-model="main.dialogInfo.data.cost" clearable type="number"
							:label="main.dialogInfo.costName" placeholder="请输入出差费用">
							<template #right-icon>
								<van-popover v-model:show="main.showPopover">
									<div class="showPopoverStyle">
										{{ main.dialogInfo.popoverInfo }}
									</div>
									<template #reference>
										<van-icon name="info-o" @click.stop="
											main.showPopover = main.showPopover ? false : true
											" />
									</template>
								</van-popover>
							</template>
						</van-field>
					</van-cell-group>
				</van-dialog>
			</van-pull-refresh>
		</template>
	</Page>
</template>

<script setup lang="ts" name="TravelExpenseManagement">
import { reactive } from "vue"
import TravelExpenseManagementClass, { TFlag } from "./TravelAddressManagement"
import TravelRecordLibraryStore, {
	TAddress,
} from "@/store/TravelRecordLibraryStore"
import _ from "lodash"
import { nanoid } from "nanoid"
import { showToast } from "vant"

const main = reactive(new TravelExpenseManagementClass())
const store = TravelRecordLibraryStore()

main.addressLibrary = store.AddressLibrary // 响应式数据

const onRefresh = () => {
	main.addressLibrary = store.AddressLibrary
	main.pullRefresh = false
	showToast({
		message: "刷新成功",
		position: "top",
	})
}

/**
 *
 * @param flag 1 或 2。1为添加出差区域，2为添加子出差地址
 * @param expense 子项地址
 */

const openDialog = (flag: number, expense?: TAddress) => {
	if (flag === 1) {
		addTravelRegion(flag)
	} else if (flag === 2 && expense !== undefined) {
		addTravelAddress(flag, expense)
	}
}

const clearDialogData = () => {
	main.dialogInfo.data = new TravelExpenseManagementClass().dialogInfo.data
}

const onConfirmDialog = (flag: number) => {
	// 通用操作：为 dialogInfo.data 生成一个新的 value
	const newValue = nanoid(main.nanoidLen)
	main.dialogInfo.data.value = newValue
	if (flag == 1) {
		main.addressLibrary.push(_.cloneDeep(main.dialogInfo.data))
		store.AddressLibrary = _.cloneDeep(main.addressLibrary)
	} else if (flag == 2) {
		if (!main.dialogInfo.expense.children) {
			Object.defineProperty(main.dialogInfo.expense, "children", {
				value: [_.cloneDeep(main.dialogInfo.data)],
				writable: true,
				enumerable: true,
				configurable: true,
			})
		} else {
			main.dialogInfo.expense.children.push(_.cloneDeep(main.dialogInfo.data))
		}
		store.AddressLibrary = _.cloneDeep(main.addressLibrary)
	}
	clearDialogData()
}

const addTravelRegion = (flag: TFlag) => {
	main.dialogInfo.title = "新增出差区域"
	main.dialogInfo.costName = "公杂费"
	main.dialogInfo.popoverInfo =
		"该项属于公杂费。是指工作人员因公出差期间发生的市内交通费、通讯费等费用。"
	main.dialogInfo.flag = flag
	main.dialogInfo.isShow = true
}

const addTravelAddress = (flag: TFlag, expense: TAddress) => {
	main.dialogInfo.title = "新增出差地址"
	main.dialogInfo.costName = "伙食费"
	main.dialogInfo.popoverInfo =
		"该项属于伙食补助费。是指对工作人员在因公出差期间因自费就餐，由单位给予的经济补助。"
	main.dialogInfo.flag = flag
	main.dialogInfo.expense = expense
	main.dialogInfo.isShow = true
}

const removeByValue = (expense: TAddress) => {
	// 过滤顶级对象
	let filteredList = main.addressLibrary.filter(
		item => item.value !== expense.value
	)

	// 递归过滤子对象
	filteredList = filteredList.map(item => {
		if (item.children) {
			item.children = item.children.filter(
				child => child.value !== expense.value
			)
		}
		return item
	})
	main.addressLibrary = filteredList
	store.AddressLibrary = filteredList
}
</script>

<style scoped lang="scss">
::v-deep(.van-pull-refresh) {
	overflow: unset;
}

::v-deep(.body) {
	padding: 0 0 10px;
}


.addNewRegionBtn {
	padding: 10px;

	button {
		width: 100%;
		font-size: 15px;
	}
}

.showPopoverStyle {
	padding: 10px;
	font-size: 13px;
}

.regionCostStyle {
	color: $error-color;
}
</style>
